<!-- /**
* Display a list of forms that the user has already filled out.
*
* @author Xiong Keqin
* @since 2023-10-25
*/ -->
<template>
    <div>
    <!-- 表格间距需要缩短 -->
    <div class="app-container"  v-if="showList">
        <el-form :model="filter">
            <el-row :gutter="10">

                <el-col :span="7">
                    <el-form-item label="显示条数" label-width="170px">
                        <el-select v-model="filter.select_size" placeholder="请选择" clearable>
                            <el-option v-for="select_size in [5, 10, 20, '全部']" :label="select_size" :value="select_size">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="就业人数是否减少" label-width="170px">
                        <el-select v-model="filter.is_decrease" placeholder="请选择" clearable>
                            <el-option v-for="is_decrease in all_is_decrease" :label="is_decrease" :value="is_decrease">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="就业人数减少类型" label-width="170px">
                        <el-select v-model="filter.decrease_type" placeholder="请选择" clearable>
                            <el-option v-for="decrease_type in all_decrease_type" :label="decrease_type" :value="decrease_type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="就业人数减少主要原因" label-width="170px">
                        <el-select v-model="filter.first_reason" placeholder="请选择" clearable>
                            <el-option v-for="first_reason in all_first_reason" :label="first_reason" :value="first_reason">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="审核状态" label-width="170px">
                        <el-select v-model="filter.examine_status" placeholder="请选择" clearable>
                            <el-option v-for="examine_status in all_examine_status" :label="examine_status" :value="examine_status">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <!-- <el-col :span="5">
                    <el-form-item label="搜索" label-width="55px">
                        <el-input v-model="filter.search" placeholder="请输入内容" clearable></el-input>
                    </el-form-item>
                </el-col> -->

                <el-col :span="2" :offset="3" align="right">
                    <el-button type="primary" @click="display" icon="el-icon-search" size="medium">查询</el-button>
                </el-col>

                <el-col :span="2" align="right">
                    <el-button type="info" @click="resetFilter" icon="el-icon-refresh-left" size="medium">重置</el-button>
                </el-col>

            </el-row>
        </el-form>


        <el-table v-loading="listLoading" :data="indexedViewData" element-loading-text="Loading" border fit
            highlight-current-row :row-class-name="tableRowClassName">

            <!-- 序号列 -->
            <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                    {{ calculateIndex(scope.$index) }}
                </template>
            </el-table-column>

            <!-- 其他列 -->
            <el-table-column align="center" label="开始时间" width="100">
                <template slot-scope="scope">
                    {{ scope.row.formStartDate }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="结束时间" width="100">
                <template slot-scope="scope">
                    {{ scope.row.formEndDate }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="建档期就业人数" width="130">
                <template slot-scope="scope">
                    {{ scope.row.formStartTotalNum }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="调查期就业人数" width="130">
                <template slot-scope="scope">
                    {{ scope.row.formEndTotalNum }}
                </template>
            </el-table-column>

            <el-table-column label="就业人数减少" width="105" align="center">
                <template slot-scope="scope">
                    {{ scope.row.formIsDecrease }}
                </template>
            </el-table-column>

            <el-table-column label="提交时间" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.row.historyDate}}
                </template>
            </el-table-column>

            <el-table-column label="就业人数减少类型" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.formDecreaseType }}
                </template>
            </el-table-column>

            <el-table-column label="主要原因" width="140" align="center">
                <template slot-scope="scope">
                    {{ scope.row.formFirstReason}}
                </template>
            </el-table-column>

            <el-table-column label="审核状态" width="140" align="center">
                <template slot-scope="scope">
                    {{ scope.row.formExamineStatus}}
                </template>
            </el-table-column>


            <el-table-column align="center" label="操作" width="110">
                <template slot-scope="scope">
                    <el-button @click="jump2Form(scope.row)" ttype="primary" plain>查看
                    </el-button>

                </template>
            </el-table-column>

        </el-table>


        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
            :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalItems">
        </el-pagination>


    </div>

    <data-qurey-form v-if="showForm" :formID="selectFormID"  @update-parameter="goBackShowList" >
    </data-qurey-form>
    </div>
</template>

<script>
import { getEnterpriseInfo} from '@/api/enterprise/enterpriseRecord'
import { getAllQueryDataInfo} from '@/api/enterprise/dataQuery'
import dataQueryForm from './dataQueryForm.vue';
import store from '@/store'
import { getUserId } from '@/utils/auth';
// import { getAllUserInfo, getAllRoles, putUserRole, putUserPwd, putUserStatus, putNewUser } from '@/api/province/userManage'

export default {
    data() {
        return {
            userId: 0, // 当前企业的账号ID
            list: [],
            showData: [],
            viewData: [],
            listLoading: true,

            page: {
                currentPage: 1,
                pageSize: 10,
                totalItems: 0,
            },
            startIndex: 0,

            all_is_decrease: [],
            all_decrease_type: [],
            all_first_reason: [],
            all_examine_status: [],

            filter: {
                is_decrease: '',
                decrease_type: '',
                first_reason: '',
                select_size: '全部', // 默认显示10条记录，或者根据需求设定默认值
                search: ''
            },

            showList: true,
            showForm: false,
            selectFormID: Number,
        }
    },

    components: {
        'data-qurey-form': dataQueryForm
    },

    computed: {
        indexedViewData() {
            return this.viewData.map((item, index) => {
                return { ...item, index: index + 1 };
            });
        }
    },

    created() {
        this.userId = getUserId()
        // console.log(this.userId)
        this.fetchData()
    },
    methods: {
        fetchData() {
            getEnterpriseInfo({"userId": this.userId}).then(response => {
				// 如果未完成备案，跳转回 企业备案提交 页面
				if(response.data.companyRecordStatus != 4){
                    this.$message('请完成企业备案!')
					this.$router.push('/enterprise/enterpriseRecord/enterpriseRecordSubmit');
				}
                else {
                    this.listLoading = true
                    // console.log("queryAllDataInfo:")
                    // console.log(this.userId)
                    getAllQueryDataInfo({"userId": this.userId}).then(response => {
                        console.log(response.data)
                        this.list = response.data.sort((a, b) => (new Date(a.historyDate).getTime() > new Date(b.historyDate).getTime() ? -1 : 1))
                        // this.list = response.data
                        this.form_id = response.data.formID
                        this.showData = this.list
                        this.all_decrease_type = Array.from(new Set(this.list.map(item => item.formDecreaseType).filter(type => type !== null && type !== undefined)));
                        this.all_first_reason = Array.from(new Set(this.list.map(item => item.formFirstReason).filter(type => type !== null && type !== undefined)));
                        this.all_is_decrease = Array.from(new Set(this.list.map(item => item.formIsDecrease).filter(type => type !== null && type !== undefined)));
                        this.all_examine_status = Array.from(new Set(this.list.map(item => item.formExamineStatus).filter(type => type !== null && type !== undefined)));
                        this.all_decrease_type.unshift('全部');
                        this.all_first_reason.unshift('全部');
                        this.all_is_decrease.unshift('全部');
                        this.all_examine_status.unshift('全部');

                        this.display()
                        this.listLoading = false // 加载完列表就可以认为加载完成
                    })

                }

            })

        },

        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'odd-row';
            } else return 'even-row';
        },

        changePageSize(val) {
            this.page.pageSize = val;
            this.display();
        },

        changeCurrentPage(val) {
            this.page.currentPage = val;
            this.startIndex = (val - 1) * this.page.pageSize;
            this.display();
        },

        calculateIndex(index) {
            return this.startIndex + index + 1;
        },


        resetFilter() {
            this.filter = {
                is_decrease: '',
                decrease_type: '',
                first_reason: '',
                select_size: '全部', // 默认显示10条记录，或者根据需求设定默认值
                examine_status: '',

            }
        },

        // filterUser() {
        //     this.showData = this.list.filter((item, index) => {
        //         if (this.filter.decrease_type && this.filter.decrease_type !== item.formDecreaseType) return false
        //         if (this.filter.first_reason && this.filter.first_reason != item.formFirstReason) return false
        //         if (this.filter.is_decrease && this.filter.is_decrease != item.formIsDecrease) return false
        //         if (this.filter.examine_status && this.filter.examine_status != item.formExamineStatus) return false
        //         console.log(this.filter.select_size)
        //         if (this.filter.select_size != '全部') {
        //             return index < this.filter.select_size
        //         }
        //         else{
        //             if (this.showData.indexOf(item) >= -1) return true;
        //         }

        //         if (this.filter.search) return item.userAccount.indexOf(this.filter.search) != -1 ||
        //             item.companyInstCode.indexOf(this.filter.search) != -1 ||
        //             item.companyChineseName.indexOf(this.filter.search) != -1;
        //         return true
        //     })
        //     // this.showData = this.list;
        //     this.page.totalItems = this.showData.length
        // },


        filterUser() {
            let filteredData = this.list;

            if(this.filter.decrease_type != '全部'){
                if (this.filter.decrease_type) {
                    filteredData = filteredData.filter(item => item.formDecreaseType === this.filter.decrease_type);
                }
            }

            if(this.filter.first_reason != '全部'){
                if (this.filter.first_reason) {
                    filteredData = filteredData.filter(item => item.formFirstReason === this.filter.first_reason);
                }
            }

            if(this.filter.is_decrease != '全部'){
                if (this.filter.is_decrease) {
                    filteredData = filteredData.filter(item => item.formIsDecrease === this.filter.is_decrease);
                }
            }

            if(this.filter.examine_status != '全部'){
                if (this.filter.examine_status) {
                    filteredData = filteredData.filter(item => item.formExamineStatus === this.filter.examine_status);
                }
            }

            if (this.filter.select_size != '全部') {
                const maxItems = parseInt(this.filter.select_size);
                filteredData = filteredData.slice(0, maxItems);
            }


            this.showData = filteredData;
            this.page.totalItems = filteredData.length;
        },



        display() {
            // console.log(this.list)
            this.filterUser()
            this.viewData = this.showData.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize))
            // console.log(this.viewData)
        },


        jump2Form(one_form) {
            this.showForm = true;
            this.showList = false;
            this.selectFormID = one_form.formID;
        },

        goBackShowList(newValue) {
            this.showForm = newValue.sForm;
            this.showList = newValue.sList;
        },





        enterCreateUser() {
            this.newUser.creating = true
            this.newUser.role = ''
            this.newUser.city = ''
        },


    },
}

</script>

<style scoped>
.el-table .odd-row {
    background: white;
}

.el-table .even-row {
    background: gainsboro;
}
</style>
